<template>
  <div class="userControlWrap">
    <div class="infoSearchWrap">
      <div class="infoSearchOne">
        <el-row :gutter="0">
          <el-col :span="6">
            <div class="searchWrap">
              <el-row :gutter="30">
                <el-col :xs="12" :sm="10" :md="4" :lg="4">
                  <span class="spanFont">姓名:</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="16" :lg="16">
                  <el-input
                    placeholder="请输入查询条件"
                    suffix-icon="search"
                    @blur="getuserInfo"
                    v-model="searchUserInfo.userName"
                    size="mini"
                  >
                  </el-input>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="searchWrap">
              <el-row :gutter="30">
                <el-col :xs="12" :sm="10" :md="6" :lg="6">
                  <span class="spanFont">用户状态:</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="16" :lg="16">
                  <el-select style="width:100%"  v-model="searchUserInfo.userStatus" @change="getuserInfo" size="mini" clearable placeholder="全部">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="searchWrap">
              <el-row :gutter="0">
                <el-col :xs="12" :sm="10" :md="6" :lg="6">
                  <span class="spanFont">创建时间：</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="15" :lg="15">
                  <div class="block">
                    <el-date-picker
                      style="width: 100%;"
                      v-model="value6"
                      type="daterange"
                      align="left"
                      @change="getuserInfo"
                      placeholder="选择日期范围"
                      size="mini"
                      :picker-options="pickerOptions2">
                    </el-date-picker>
                  </div>
                </el-col>
              </el-row>
            </div>

          </el-col>

        </el-row>
      </div>
      <div class="infoSearchOne">
        <el-row :gutter="0">
          <el-col :span="6">
            <div class="searchWrap">
              <el-row :gutter="30">
                <el-col :xs="12" :sm="10" :md="4" :lg="4">
                  <span class="spanFont">手机:</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="16" :lg="16">
                  <el-input
                    placeholder="请输入查询条件"
                    suffix-icon="search"
                    @blur="getuserInfo"
                    v-model="searchUserInfo.mobile"
                    size="mini"
                  >
                  </el-input>
                </el-col>
              </el-row>
            </div>
          </el-col>
         <!-- <el-col :span="6">
            <div class="searchWrap">
              <el-row :gutter="30">
                <el-col :xs="12" :sm="10" :md="6" :lg="6">
                  <span class="spanFont">归属单位:</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="16" :lg="16">
                  <el-select style="width:100%"  v-model="searchUserInfo.organizeId" @change="getuserInfo" size="mini" clearable placeholder="全部">
                    <el-option
                      v-for="item in companies"
                      :key="item.organizeId+''"
                      :label="item.organizeName"
                      :value="item.organizeId+''">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </div>
          </el-col>-->
          <el-col :span="6">
            <div class="searchWrap">
              <el-row :gutter="30">
                <el-col :xs="12" :sm="10" :md="6" :lg="6">
                  <span class="spanFont">身份证号:</span>
                </el-col>
                <el-col :xs="12" :sm="14" :md="16" :lg="16">
                  <el-input
                    placeholder="请输入查询条件"
                    suffix-icon="search"
                    @blur="getuserInfo"
                    v-model="searchUserInfo.cardNumber"
                    size="mini"
                  >
                  </el-input>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <div style="float: right;margin-right: 20px;">
            <div class="searchWrap">
              <el-button type="primary" size="small" @click="getuserInfo()">查询</el-button>
              <addBtn :companies="companies" @getuserInfo="getuserInfo"></addBtn>
              <el-button style="margin-left: 10px;" type="primary" size="small" @click="dialogFormVisibleAdd = true">
                批量导入
              </el-button>
            </div>
          </div>
        </el-row>
      </div>
    </div>
    <div class="table_container">
      <div class="tableInner" ref="tableInnerWrap">
        <el-table
          ref="multipleTable"
          :data="rows"
          border
          stripe
          :height="tableHeight"
          @sort-change="sortChange"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="手机号"
            prop="mobile"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="真实姓名"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            label="性别"
            prop="userName"
          >
            <template slot-scope="scope">
              {{scope.row.gender === 1 ? '男' :scope.row.gender === 2 ? '女' : ''}}
            </template>
          </el-table-column>

          <el-table-column
            prop="ulianUserExtends.userNick"
            label="昵称"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="cardNumber"
            label="身份证号"
            show-overflow-tooltip>
          </el-table-column>

         <!-- <el-table-column
            prop="ulianUserExtends.organizeName"
            label="归属单位"
            show-overflow-tooltip>
          </el-table-column>-->
          <el-table-column
            label="状态"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.userStatus == 1 ? '可用' :scope.row.userStatus == 0 ? '禁用' : ''}}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            sortable="custom"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="120"
           >
            <template slot-scope="scope">

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: left;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 30, 50, 100,200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
    </div>
    <journeyDetailBtn ref="mapDialog"></journeyDetailBtn>

  </div>
</template>

<script>
  import addBtn from "./btn/addBtn.vue"
  import setBtn from "./btn/setBtn.vue"
  import relatedRoleBtn from "./btn/relatedRoleBtn.vue"
  import journeyDetailBtn from "./btn/journeyDetailBtn.vue"
  import dtime from "time-formater"
  import axios from "axios"

  export default {
    props: ["allCompanies"],
    data(){

      return {
        //关联角色
        userName: '',
        options: [{
          value: '1',
          label: '可用'
        }, {
          value: '0',
          label: '禁用'
        }],
        rows: [],
        currentRow: null,
        pageSize: 10,
        loading: true,
        count: 0,
        companies: [],
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        currentPage: 1,
        uploadForm: new FormData(),
        uploadUrl: "aaa",
        dialogFormVisibleAdd: false,
        //以下为搜索
        value6: "",
        tableHeight:"200",
        searchUserInfo: {
          userName: "",
          userStatus: "",
          cardNumber: "",
          organizeId: "",
          mobile: "",
          startTime: "",
          endTime: "",
          sortType: "createTime",
          asc: "false",
        },
        allUsers: [],
//        编辑添加表单

      }
    },
    components: {
      addBtn,setBtn,
      relatedRoleBtn,
      journeyDetailBtn
    },
    created(){
      this.getuserInfo()
      this.getStartData()
    },
    mounted(){
      //表格滚动
      this.$nextTick(() => {
        this.tableHeight = document.querySelector(".userControlWrap").clientHeight - 160
      })
    },
    methods: {
      //下载模板
      downLoadXml(){
        let url2 = process.env.API_HOST + `/template/用户信息导入模板.xlsx`
        window.location.href = url2
      },
      //提交
      newSubmitForm () {
        if (!(document.querySelector("input[type='file']").value)) {
          this.$message.error('请选取文件');
          return
        }
        axios({
          method: 'post',  // 方式一定是post
          url: process.env.API_HOST + `/ulianUserBase/batchImport`,
          timeout: 20000,
          data: this.uploadForm        // 参数需要是单一的formData形式
        }).then(res => {
          if (res.data.state === 0) {
            this.$message({
              type: 'success',
              message: "导入成功"
            });
            this.uploadForm = new FormData()
            this.getuserInfo()
            this.dialogFormVisibleAdd = false
          } else if (res.data.state === 2) {

            this.uploadForm = new FormData()
            this.getuserInfo()
            this.dialogFormVisibleAdd = false
          } else {

            this.uploadForm = new FormData()
            this.getuserInfo()
            this.dialogFormVisibleAdd = false
          }

        })
        this.$refs.uploadfile2.submit()

      },
      newFiles (file) {
        const isLt2M = file.size / 1024 / 1024 < 500;
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 2MB!');
        } else {
          this.uploadForm.append('file', file)
          return false
        }

      },
      openMapDIalog(data){
        this.$refs.mapDialog.dialigOpen(data)
      },
      getStartData(){
        let url = process.env.API_HOST + `/ulinkOrganize/find`
        axios.get(url, {withCredentials: true})
          .then(response => {
            const result = response.data
            if (result.state == 0) {
              this.companies=result.data

            }
          })
      },
      //排序   sortable="custom"
      sortChange(a) {
        if (a.column) {
          if (a.column.label == "创建时间") {
            this.searchUserInfo.asc = !this.searchUserInfo.asc
            this.searchUserInfo.sortType = "createTime"
            this.getuserInfo()
          } else {
            this.searchUserInfo.sortType = a.prop
            this.getuserInfo()
          }
        } else {
          this.searchUserInfo.asc = "true", this.searchUserInfo.sortType = ""
        }
      },
      //重置
      resetInfo(){
        this.searchUserInfo.userName = "";
        this.searchUserInfo.userStatus = ""
        this.searchUserInfo.cardNumber = ""
        this.searchUserInfo.organizeId = ""
        this.searchUserInfo.mobile = ""
        this.searchUserInfo.startTime = ""
        this.searchUserInfo.endTime = ""
        this.value6 = ""
        this.getuserInfo()
      },

      //删除
      handleDelete(row){
        this.$confirm('此操作将重置用户 “' + row.userName + '” 的密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = process.env.API_HOST + `/ulianUserBase/resetPassword?userId=${row.userId}`
          axios.get(url, {withCredentials: true})
            .then(response => {
              const result = response.data
              if (result.state == 0) {
                this.$message({
                  type: 'success',
                  message: '重置成功!'
                });
              }else {
                this.$message({
                  type: 'warning',
                  message: result.message
                });
              }
            })

        })
      },
      //获取数据
      getuserInfo(){
        this.currentPage = k===100?this.currentPage:1
        if (this.value6&&this.value6[0]) {
          this.searchUserInfo.startTime = dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchUserInfo.endTime = dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')

        } else if (this.value6 === null) {
          this.searchUserInfo.startTime = ""
          this.searchUserInfo.endTime = ""
        }
        let url = process.env.API_HOST + `/ulianUserBase/findAll?page=${this.currentPage}&size=${this.pageSize}&sortType=${this.searchUserInfo.sortType}&asc=${this.searchUserInfo.asc}&userName=${encodeURI(this.searchUserInfo.userName)}&mobile=${this.searchUserInfo.mobile}&userStatus=${this.searchUserInfo.userStatus}&cardNumber=${this.searchUserInfo.cardNumber}&organizeId=${this.searchUserInfo.organizeId}&startTime=${this.searchUserInfo.startTime}&endTime=${this.searchUserInfo.endTime}`
        axios.get(url, {withCredentials: true})
          .then(response => {
            const result = response.data
            if (result.state == 0) {
              this.rows = result.data.list
              this.count = result.data.totalCount;

            }
          })
      },
      //表格翻页等
      handleSizeChange(val) {
        this.pageSize = val
        this.getuserInfo()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getuserInfo(100)
      }

    },

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .userControlWrap
    page()
    .table_container
      margin 0 auto
      padding 9px
      .tableInner //表格滚动
        width 100%
        overflow-y auto
    .infoSearchWrap
      padding 8px 0 8px 0
      overflow hidden
      font-size 14px
      border-bottom 10px solid $bg
      .infoSearchOne
        width 100%
        line-height 36px
        .searchWrap
          margin-left 10px
          white-space nowrap
          overflow hidden
          font-size 14px
          line-height 36px
          width 100%
          .spanFont
            margin-left 10px
    .uploadRack, .clickDownload, .btnRack
      text-align center
      width 100%
      line-height 50px
    .uploadRack
      border 1px dashed #555
      border-radius 10px
      width 80%
      margin 10px auto
</style>
